<template>
  <!-- 聊天列表 -->
  <div class="chat-item" v-for="item in messageList" :key="item.id" @click="handleChat(item)">
    <van-image class="chat-avatar" round :src="item.avatar" width="40" height="40" />
    <div class="chat-content">
      <div class="chat-title">{{ item.name }}</div>
      <div class="chat-desc text-ellipsis">
        {{ item.lastMessage ? item.lastMessage.content : '' }}
      </div>
    </div>
    <div class="chat-right">
      <div class="chat-time">
        {{ item.lastMessage ? formatDate(item.lastMessage.timestamp) : '' }}
      </div>
      <div class="chat-status" v-show="!item.lastMessage.read"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { formatDate } from '@/utils/date'

const router = useRouter()

const props = defineProps({
  messageList: {
    type: Array,
    default: () => [],
  },
})

// 跳转聊天详情
const handleChat = (item) => {
  const { id, name, type } = item
  router.push({
    path: `/chat/detail/${id}`,
    query: {
      type: type,
      name: name,
    },
  })
}
</script>

<style scoped>
/* 聊天项样式 */
.chat-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color-light);
}

.chat-avatar {
  flex-shrink: 0;
}

.chat-content {
  flex: 1;
  margin: 0 var(--spacing-md);
  overflow: hidden;
}

.chat-title {
  font-size: var(--font-size-base);
  color: var(--font-color-base);
  margin-bottom: 4px;
}

.chat-desc {
  font-size: var(--font-size-sm);
  color: var(--font-color-gray);
}
.chat-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}
.chat-time {
  font-size: var(--font-size-xs);
  color: var(--font-color-light);
}
.chat-status {
  /* 红圆点 */
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
}

/* 通用样式 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.van-badge) {
  --van-badge-background: var(--color-primary);
}
</style>
